<template>
  <div class="min-h-screen bg-gray-50">
    <!-- Header -->
    <header class="bg-white shadow-sm">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
        <div class="flex items-center justify-between">
          <div class="flex items-center space-x-4">
            <a-button @click="goBack">
              <template #icon><ArrowLeftOutlined /></template>
              返回
            </a-button>
            <div>
              <h1 class="text-2xl font-bold text-gray-900">{{ workstation?.name || '工位详情' }}</h1>
              <p class="text-sm text-gray-500">工位详细信息与操作</p>
            </div>
          </div>
          
          <a-tag :color="getStatusColor(workstation?.status)" class="text-base px-4 py-1">
            {{ getStatusText(workstation?.status) }}
          </a-tag>
        </div>
      </div>
    </header>

    <!-- Main Content -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <div v-if="loading" class="text-center py-12">
        <a-spin size="large" />
        <p class="mt-4 text-gray-500">加载中...</p>
      </div>

      <div v-else-if="!workstation" class="text-center py-12">
        <a-empty description="工位不存在" />
      </div>

      <div v-else class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Left Column - Main Info -->
        <div class="lg:col-span-2 space-y-6">
          <!-- Basic Info Card -->
          <a-card title="基本信息" class="shadow-sm">
            <div class="grid grid-cols-2 gap-4">
              <div class="space-y-4">
                <div>
                  <p class="text-sm text-gray-500 mb-1">工位名称</p>
                  <p class="text-base font-medium text-gray-900">{{ workstation.name }}</p>
                </div>
                <div>
                  <p class="text-sm text-gray-500 mb-1">工位状态</p>
                  <a-tag :color="getStatusColor(workstation.status)">
                    {{ getStatusText(workstation.status) }}
                  </a-tag>
                </div>
              </div>
              <div class="space-y-4">
                <div>
                  <p class="text-sm text-gray-500 mb-1">工位ID</p>
                  <p class="text-base font-medium text-gray-900">{{ workstation.id }}</p>
                </div>
                <div>
                  <p class="text-sm text-gray-500 mb-1">所在位置</p>
                  <p class="text-base font-medium text-gray-900">{{ workstation.config?.location || '未配置' }}</p>
                </div>
              </div>
            </div>
          </a-card>

          <!-- Device Info Card -->
          <a-card title="设备信息" class="shadow-sm">
            <template #extra>
              <a-button type="link" size="small">
                <template #icon><EditOutlined /></template>
                编辑
              </a-button>
            </template>
            
            <div class="space-y-3">
              <div v-for="(device, index) in workstation.config?.devices || []" :key="index">
                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                  <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                      <ToolOutlined class="text-blue-600" />
                    </div>
                    <div>
                      <p class="font-medium text-gray-900">{{ device }}</p>
                      <p class="text-xs text-gray-500">设备 #{{ index + 1 }}</p>
                    </div>
                  </div>
                  <a-tag color="success">在线</a-tag>
                </div>
              </div>
            </div>
          </a-card>

          <!-- Operation History Card -->
          <a-card title="操作历史" class="shadow-sm">
            <template #extra>
              <a-button type="link" size="small">
                <template #icon><ReloadOutlined /></template>
                刷新
              </a-button>
            </template>
            
            <a-timeline>
              <a-timeline-item color="green">
                <p class="text-sm text-gray-900">工位启动成功</p>
                <p class="text-xs text-gray-500">2025-10-04 10:30:25</p>
              </a-timeline-item>
              <a-timeline-item color="blue">
                <p class="text-sm text-gray-900">配置更新完成</p>
                <p class="text-xs text-gray-500">2025-10-04 09:15:10</p>
              </a-timeline-item>
              <a-timeline-item>
                <p class="text-sm text-gray-900">系统初始化</p>
                <p class="text-xs text-gray-500">2025-10-04 08:00:00</p>
              </a-timeline-item>
            </a-timeline>
          </a-card>
        </div>

        <!-- Right Column - Actions & Status -->
        <div class="space-y-6">
          <!-- Quick Actions Card -->
          <a-card title="快速操作" class="shadow-sm">
            <div class="space-y-3">
              <a-button
                type="primary"
                block
                size="large"
                disabled
                class="opacity-50"
              >
                <template #icon><PlayCircleOutlined /></template>
                进入操作界面
              </a-button>
              <p class="text-xs text-center text-gray-400">暂未实现</p>
              
              <a-divider class="my-4" />
              
              <a-button block size="large" :disabled="workstation.status === 'running'">
                <template #icon><CaretRightOutlined /></template>
                启动
              </a-button>
              
              <a-button block size="large" :disabled="workstation.status !== 'running'">
                <template #icon><PauseOutlined /></template>
                暂停
              </a-button>
              
              <a-button block size="large" danger>
                <template #icon><PoweroffOutlined /></template>
                停止
              </a-button>
              
              <a-button block size="large">
                <template #icon><ReloadOutlined /></template>
                复位
              </a-button>
            </div>
          </a-card>

          <!-- Real-time Status Card -->
          <a-card title="实时状态" class="shadow-sm">
            <template #extra>
              <a-badge status="processing" text="实时" />
            </template>
            
            <div class="space-y-4">
              <div>
                <div class="flex justify-between mb-2">
                  <span class="text-sm text-gray-600">CPU使用率</span>
                  <span class="text-sm font-medium">45%</span>
                </div>
                <a-progress :percent="45" :show-info="false" status="normal" />
              </div>
              
              <div>
                <div class="flex justify-between mb-2">
                  <span class="text-sm text-gray-600">内存使用</span>
                  <span class="text-sm font-medium">62%</span>
                </div>
                <a-progress :percent="62" :show-info="false" status="normal" />
              </div>
              
              <div>
                <div class="flex justify-between mb-2">
                  <span class="text-sm text-gray-600">任务进度</span>
                  <span class="text-sm font-medium">78%</span>
                </div>
                <a-progress :percent="78" :show-info="false" status="active" />
              </div>
              
              <a-divider class="my-4" />
              
              <div class="space-y-2">
                <div class="flex justify-between text-sm">
                  <span class="text-gray-600">运行时长</span>
                  <span class="font-medium">2小时 15分</span>
                </div>
                <div class="flex justify-between text-sm">
                  <span class="text-gray-600">完成任务</span>
                  <span class="font-medium">156</span>
                </div>
                <div class="flex justify-between text-sm">
                  <span class="text-gray-600">错误次数</span>
                  <span class="font-medium text-red-600">3</span>
                </div>
              </div>
            </div>
          </a-card>

          <!-- System Info Card -->
          <a-card title="系统信息" class="shadow-sm">
            <div class="space-y-2 text-sm">
              <div class="flex justify-between">
                <span class="text-gray-600">最后更新</span>
                <span class="font-medium">刚刚</span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-600">连接状态</span>
                <a-tag color="success" class="m-0">已连接</a-tag>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-600">通信协议</span>
                <span class="font-medium">TCP/IP</span>
              </div>
            </div>
          </a-card>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import {
  ArrowLeftOutlined,
  ToolOutlined,
  EditOutlined,
  ReloadOutlined,
  PlayCircleOutlined,
  CaretRightOutlined,
  PauseOutlined,
  PoweroffOutlined
} from '@ant-design/icons-vue'
import { useWorkstationStore } from '@/stores/workstation'
import { storeToRefs } from 'pinia'

const route = useRoute()
const router = useRouter()
const workstationStore = useWorkstationStore()

const { currentWorkstation: workstation } = storeToRefs(workstationStore)
const loading = ref(false)

const getStatusColor = (status) => {
  const colors = {
    idle: 'default',
    running: 'processing',
    error: 'error',
    offline: 'warning'
  }
  return colors[status] || 'default'
}

const getStatusText = (status) => {
  const texts = {
    idle: '空闲',
    running: '运行中',
    error: '异常',
    offline: '离线'
  }
  return texts[status] || '未知'
}

const loadWorkstation = async () => {
  loading.value = true
  try {
    const id = route.params.id
    await workstationStore.fetchWorkstationById(id)
  } catch (error) {
    message.error('加载工位信息失败')
    console.error(error)
  } finally {
    loading.value = false
  }
}

const goBack = () => {
  router.push('/workstations')
}

onMounted(() => {
  loadWorkstation()
})
</script>

<style scoped>
:deep(.ant-card-head-title) {
  font-weight: 600;
}
</style>

